<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content">
            <el-row :gutter="4">
              <el-form inline label-position="left" class="demo-form-inline">
                <el-form-item label="关键字" prop="keywords">
                  <el-input
                    v-model="searchViewDto.keywords"
                    placeholder="请输入关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="searchView"
                    >查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clearView"
                  >
                    重置
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="fa fa-backward"
                    type="primary"
                    @click="handleBack"
                  >
                    返回
                  </el-button>
                </el-form-item>
              </el-form>
              <page-table
                ref="multipleSelection"
                :page-data="pageData"
                :loading="loading"
                :do-get-page-data="getPageData"
              >
                <el-table-column
                  type="index"
                  width="100px"
                  align="center"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  prop="userName"
                  label="审批人"
                  show-overflow-tooltip
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="status"
                  label="审批状态"
                  show-overflow-tooltip
                  align="center"
                >
                  <template slot-scope="scope">
                    <sz-badge
                      :value="scope.row.status | keyText('DOCUMENT_STATUS')"
                      :type="statusClass(scope.row)"
                    ></sz-badge>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="reason"
                  align="center"
                  label="拒绝原因"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="auditTime"
                  label="审批时间"
                  show-overflow-tooltip
                  align="center"
                ></el-table-column>
              </page-table>
            </el-row>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
import Moment from "moment";
import { mapGetters } from "vuex";

export default {
  created() {
    this.getPageData();
  },
  data() {
    return {
      searchViewDto: {
        pageIndex: 1,
        pageSize: 10,
        documentId: this.$route.query.id,
        status: "",
        keywords: ""
      },
      moduleTypes: this.getDictionary("MODULE"),
      pageData: {},
      loading: false
    };
  },
  watch: {
    $route(to, from) {
      if (this.$route.query.id) {
        this.getPageData();
      }
    }
  },
  methods: {
    statusClass(row) {
      let cls = "";
      switch (row.status) {
        case "REJECT":
          cls = "danger";
          break;
        case "COMPLETE":
          cls = "success";
          break;
        case "WAIT_HANDLE":
          cls = "warning";
          break;
      }
      return cls;
    },

    searchView() {
      this.getPageData();
    },
    handleBack() {
      this.$router.go(-1);
    },
    clearView() {
      this.searchViewDto = {
        pageIndex: 1,
        pageSize: 10,
        documentId: this.$route.query.id,
        status: "",
        keywords: ""
      };
      this.getPageData();
    },
    getPageData(val) {
      let tem = Object.assign(this.searchViewDto, val);
      this.API.getDocumentAuditPageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    }
  }
};
</script>
<style scoped></style>
